<template>
  <div class="complaint-info">
    <el-scrollbar class="scroll-wrapper">
      <div class="content">
        <div class="section-title syht14">基本信息</div>
        <!-- v-if="comInfo" -->
        <enter-base-msg :pageMsg="comInfo"></enter-base-msg>

        <div class="section-title mt20">
          <span class="name syht14">审批信息</span>
          <div class="btn syht14" @click="dialogVisible = true">审批记录</div>
        </div>
        <el-form v-if="!view" label-suffix="：" :model="submitForm" :rules="rules" label-width="100px" ref="dataForm">
          <el-form-item prop="approvalStatus" label="审批结论">
            <el-radio-group v-model="submitForm.approvalStatus">
              <el-radio v-for="item in approveStatusList" :key="item.key" :label="item.key">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审批意见" prop="approvalContent">
            <el-input
              placeholder="请输入"
              v-model="submitForm.approvalContent"
              maxlength="200"
              show-word-limit
              clearable
              type="textarea"
              rows="3"></el-input>
          </el-form-item>
          <div class="btn-box">
            <el-button class="btn-item" type="primary" @click="submitData">提交</el-button>
          </div>
        </el-form>
        <template v-else>
          <div class="list-con" v-if="approvalRecord.length">
            <div class="li">
              <div class="li-key">审批结论</div>
              <div class="li-val">{{ approvalRecord[0].approvalStatus }}</div>
            </div>
            <div class="li">
              <div class="li-key">审批意见</div>
              <div class="li-val">{{ approvalRecord[0].approvalContent }}</div>
            </div>
            <div class="li">
              <div class="li-key">审批时间</div>
              <div class="li-val">{{ approvalRecord[0].createTime }}</div>
            </div>
            <div class="li">
              <div class="li-key">审核人</div>
              <div class="li-val">{{ approvalRecord[0].createByName }}</div>
            </div>
          </div>
          <empty v-else></empty>
        </template>
      </div>
    </el-scrollbar>
    <approval-record :visible.sync="dialogVisible" :page-data="approvalRecord"></approval-record>
  </div>
</template>

<script>
import { approvalEnterpriseApi, listApprovalRecordApi } from '@api/modules/enterprise.js'
import { APPROVE_STATUS } from '@utility/dict'
import EnterBaseMsg from '../../../enterprise/details/components/EnterBaseMsg.vue'
import Empty from '@com/Empty.vue'
import ApprovalRecord from '../../components/ApprovalRecord.vue'
export default {
  components: {
    EnterBaseMsg,
    Empty,
    ApprovalRecord,
  },
  props: {
    comInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      approveStatusList: APPROVE_STATUS._keys
        .filter(item => item !== '0')
        .map(key => {
          return {
            key,
            label: APPROVE_STATUS._label[key],
          }
        }),
      submitForm: {
        id: '',
        approvalStatus: '',
        approvalContent: '',
      },
      rules: {
        approvalStatus: [{ required: true, message: '请选择审批结论', trigger: 'blur' }],
        approvalContent: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
      },
      view: null,
      approvalRecord: [],
      dialogVisible: false,
    }
  },
  watch: {
    comInfo: {
      handler() {
        this.submitForm.id = this.comInfo.id
        this.submitForm.approvalStatus = this.comInfo.approvalStatus
        this.submitForm.approvalContent = this.comInfo.approvalContent
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {},
  filters: {
    statusFilter(status) {
      return APPROVE_STATUS[status] || ''
    },
  },
  created() {
    this.view = this.$route.params.view
    this.listApprovalRecordData()
  },
  methods: {
    // 提交数据
    submitData() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          const params = { ...this.submitForm }
          approvalEnterpriseApi(params).then(res => {
            if (res.code === 0) {
              this.$message.success(res.data)
              this.goBack()
            }
          })
        }
      })
    },
    // 获取审批记录
    listApprovalRecordData() {
      listApprovalRecordApi({ id: this.comInfo.id }).then(res => {
        if (res.code === 0) {
          this.approvalRecord = res.data
        }
      })
    },
    goBack() {
      this.$router.back(-1)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@styles/detailsTable.scss';
.complaint-info {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  .scroll-wrapper {
    flex: 1;
  }
  .content {
    padding: 20px;

    .section-title {
      margin-bottom: 15px;
      padding-left: 15px;
      border-left: 3px solid #3b93f7;
      display: flex;
      align-items: center;
      .btn {
        margin-left: 50px;
        font-weight: 500;
        color: #3b93f7;
        cursor: pointer;
        text-decoration: underline;
      }
    }
    .btn-box {
      text-align: center;
      .btn-item {
        width: 120px;
        height: 40px;
        font-size: 16px;
      }
    }
  }
}
</style>
